<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">111</div>
    <input type="text" class="myinput" />
    <script>
        // 键盘事件 ：触发键盘的时候产生的事件 
        // keydown  keypress keyup
        // keydown 和 keyup 表现是一样的 ；
        // 1.keydown ： 键盘按下的时候触发事件 
        // document.onkeydown = function(){
        //     console.log("键盘按下了");
        // }

        // 在元素身上绑定键盘事件没有效果
        // document.querySelector(".box").onkeydown = function(){
        //     console.log("键盘按下了");
        // }

        // 在输入框里绑定键盘事件,键盘事件可以再input框里进行绑定的；
        // document.querySelector(".myinput").onkeydown = function(){
        //     console.log("键盘按下了");
        // }

        // 2.keyup :按键抬起的时候触发事件
        // document.onkeyup = function(){
        //     console.log("键盘抬起了");
        // }


        // 3.keypress : 键盘按压的时候执行；
        // document.onkeypress = function(){
        //     console.log("键盘按压了");
        // }

        // 4.区分按键 ：
        // 方式一： 通过事件对象的keyCode 来区分 （不推荐）;
        // keydown 和keyup 都是一样 ，他们不区分大小写 ；
        // document.onkeydown = function(e){
        //     var keycode = e.keyCode;  // 是按键的assci码的值；
        //     console.log(keycode);
        // }   
        // keypress 的 keyCode 是区分大小写的；
        // keypress 不是所有按键都支持
        // document.onkeypress = function(e){
        //     var keycode = e.keyCode;
        //     console.log(keycode);
        // }

        // 方式二 ：通过事件对象的key 来区分 ；
        document.onkeydown = function(e){
            var key = e.key;  // 直接获取按键的字符；
            console.log(key);
            if(key==="Enter"){
                console.log("按了enter");
            }
        }

        // 写一下； 一个方块运动，然后通过键盘控制方块的方向 ；

    </script>
</body>
</html>